import React, { useState } from "react";
import { useEffect } from "react";
import { useRef } from "react";
import "./assets/style/weibo.css";
import store from "./store";
import {getWeibo, postWeibo} from "./api/weibo";

import { upContentList } from "./store/slice/weibo";

export default function App() {
  const contentRef = useRef();
  const [contentList, setContentList] = useState(
    store.getState().weibo.contentList
  );
  //添加微博
  const postWeiboAsync = async () => {
    const content = contentRef.current.value.trim();
    if (content.length === 0) {
      alert("请输入内容");
      return;
    }
    await postWeibo(content); //添加微博
    contentRef.current.value = null;
    getWeiboAsync();
  };

  //获取微博
  const getWeiboAsync = async () => {
    const { contentList } = await getWeibo(1, 30);
    store.dispatch(upContentList(contentList));
  };
  useEffect(() => {
    getWeiboAsync();
    //增加订阅者
    store.subscribe(() => {
      setContentList(store.getState().weibo.contentList);
    });
  }, []);
  return (
    <div className="jyArea">
      <div className="takeComment">
        <textarea
          ref={contentRef}
          name="textarea"
          className="takeTextField"
          id="tijiaoText"
        ></textarea>
        <div className="takeSbmComment">
          <input onClick={postWeiboAsync} type="button" className="inputs" value="" />
        </div>
      </div>

      <div className="commentOn">
        <div className="noContent">暂无留言</div>
        <div className="messList">
                  {
                      contentList.map(item => (
                        <div className="reply">
                              <p className="replyContent">{item.content}</p>
                        <p className="operation">
                                  <span className="replyTime">{item.addTime}</span>
                          <span className="handle">
                            <a href="" className="top">
                              {item.topNum}
                            </a>
                            <a href="" className="down_icon">
                              {item.downNum}
                            </a>
                            <a href="" className="cut">
                              删除
                            </a>
                          </span>
                        </p>
                      </div>
                        ))
                  }
        </div>
        <div className="page">
          <a href="" className="active">
            1
          </a>
          <a href="">2</a>
          <a href="">3</a>
        </div>
      </div>
    </div>
  );
}
